<template>
  <div class="add-container">
    <el-card class="add-card">
      <div slot="header" class="clearfix">
        <span>添加资产</span>
      </div>
      <div class="add-main">
        <!-- 表单: 栅格布局 -->
        <el-form
          :model="form"
          ref="ruleForm"
          :rules="rules"
          label-width="120px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="资产状态" prop="assetStatus">
                <div class="border-container">
                  <el-select v-model="form.assetStatus" class="input-style">
                    <el-option
                      v-for="status in assetStatues"
                      :key="status.id"
                      :label="status.name"
                      :value="status.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资产名称" prop="assetName">
                <div class="border-container">
                  <el-input v-model="form.assetName" class="input-style" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="资产编号" prop="number">
                <div class="border-container">
                  <el-input
                    v-model="form.number"
                    class="input-style"
                    disabled
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资产类别" prop="assetCategoryId">
                <div class="border-container">
                  <el-select v-model="form.assetCategoryId" class="input-style">
                    <el-option
                      v-for="category in categories"
                      :key="category.id"
                      :label="category.name"
                      :value="category.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属物品id" prop="itemCatalogId">
                <div class="border-container">
                  <el-select v-model="form.itemCatalogId" class="input-style">
                    <el-option
                      v-for="item in items"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资产来源" prop="source">
                <div class="border-container">
                  <el-select v-model="form.source" class="input-style">
                    <el-option
                      v-for="source in sources"
                      :key="source.id"
                      :label="source.name"
                      :value="source.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="管理员" prop="adminId">
                <div class="border-container">
                  <el-select v-model="form.adminId" class="input-style">
                    <el-option
                      v-for="admin in users"
                      :key="admin.id"
                      :label="admin.name"
                      :value="admin.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="使用人" prop="userId">
                <div class="border-container">
                  <el-select v-model="form.userId" class="input-style">
                    <el-option
                      v-for="user in users"
                      :key="user.id"
                      :label="user.name"
                      :value="user.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="当前位置" prop="nowLocationId">
                <div class="border-container">
                  <el-select v-model="form.nowLocationId" class="input-style">
                    <el-option
                      v-for="location in locations"
                      :key="location.id"
                      :label="location.name"
                      :value="location.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目标位置" prop="targetLocationId">
                <div class="border-container">
                  <el-select
                    v-model="form.targetLocationId"
                    class="input-style"
                  >
                    <el-option
                      v-for="location in locations"
                      :key="location.id"
                      :label="location.name"
                      :value="location.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="仓库" prop="storageId">
                <div class="border-container">
                  <el-select v-model="form.storageId" class="input-style">
                    <el-option
                      v-for="storage in storages"
                      :key="storage.id"
                      :label="storage.name"
                      :value="storage.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用途" prop="usage">
                <div class="border-container">
                  <el-input v-model="form.usage" class="input-style" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="购入金额" prop="amount">
                <div class="border-container">
                  <el-input
                    type="text"
                    v-model="form.amount"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出厂日期" prop="factoryDate">
                <div class="border-container">
                  <el-date-picker
                    type="date"
                    v-model="form.factoryDate"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="使用日期" prop="startDate">
                <div class="border-container">
                  <el-date-picker
                    type="date"
                    v-model="form.startDate"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保修厂商" prop="maintenVendorId">
                <div class="border-container">
                  <el-select
                    v-model="form.maintenVendorId"
                    @change="handleChangeVendor(form.maintenVendorId)"
                    class="input-style"
                  >
                    <el-option
                      v-for="vendor in vendors"
                      :key="vendor.id"
                      :label="vendor.name"
                      :value="vendor.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="厂商联系人" prop="maintenPersonId">
                <div class="border-container">
                  <el-select v-model="form.maintenPersonId" class="input-style">
                    <el-option
                      v-for="person in maintenPersons"
                      :key="person.id"
                      :label="person.name"
                      :value="person.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保修期限" prop="warranty">
                <div class="border-container">
                  <el-input
                    type="text"
                    v-model="form.warranty"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="保修开始日期" prop="maintenStarted">
                <div class="border-container">
                  <el-date-picker
                    type="date"
                    v-model="form.maintenStarted"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保修状态" prop="maintenStatus">
                <div class="border-container">
                  <el-select v-model="form.maintenStatus" class="input-style">
                    <el-option
                      v-for="status in maintenStatuses"
                      :key="status.id"
                      :label="status.name"
                      :value="status.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="财务状态" prop="accountStatus">
                <div class="border-container">
                  <el-select v-model="form.accountStatus" class="input-style">
                    <el-option
                      v-for="status in accountStatuses"
                      :key="status.id"
                      :label="status.name"
                      :value="status.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入库日期" prop="entryDate">
                <div class="border-container">
                  <el-date-picker
                    type="date"
                    v-model="form.entryDate"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="清理日期" prop="cleanDate">
                <div class="border-container">
                  <el-date-picker
                    type="date"
                    v-model="form.cleanDate"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="录入日期" prop="inputDate">
                <div class="border-container">
                  <el-date-picker
                    type="date"
                    v-model="form.inputDate"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="预计使用年限" prop="estimateUsageTerm">
                <div class="border-container">
                  <el-input
                    type="text"
                    v-model="form.estimateUsageTerm"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资产价值" prop="intoAmount">
                <div class="border-container">
                  <el-input
                    type="text"
                    v-model="form.intoAmount"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="税率" prop="tax">
                <div class="border-container">
                  <el-input
                    type="text"
                    v-model="form.tax"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="残值率" prop="residualValueRate">
                <div class="border-container">
                  <el-input
                    type="text"
                    v-model="form.residualValueRate"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="减值" prop="impairment">
                <div class="border-container">
                  <el-input
                    type="text"
                    v-model="form.impairment"
                    class="input-style"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="折旧方式" prop="depreciatedMethod">
                <div class="border-container">
                  <el-select
                    v-model="form.depreciatedMethod"
                    class="input-style"
                  >
                    <el-option
                      v-for="method in depreciatedMethods"
                      :key="method.id"
                      :label="method.name"
                      :value="method.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="计提方式" prop="accrualMethod">
                <div class="border-container">
                  <el-select v-model="form.accrualMethod" class="input-style">
                    <el-option
                      v-for="method in accrualMethods"
                      :key="method.id"
                      :label="method.name"
                      :value="method.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购验收单号" prop="purchaseAcceptNum">
                <div class="border-container">
                  <el-select
                    v-model="form.purchaseAcceptNum"
                    class="input-style"
                  >
                    <el-option
                      v-for="acceptNum in acceptNums"
                      :key="acceptNum.applicationNum"
                      :label="acceptNum.applicationNum"
                      :value="acceptNum.applicationNum"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="创建人" prop="creatorId">
                <div class="border-container">
                  <el-select v-model="form.creatorId" class="input-style">
                    <el-option
                      v-for="creator in users"
                      :key="creator.id"
                      :label="creator.name"
                      :value="creator.id"
                    />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button type="warning" @click="goBack()">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { fixedAsset } from "@/api/fixedAsset.js";
import { assetCategory } from "@/api/assetCategory.js";
import itemCatalogApi from "@/api/item-catalog.js";
import userService from "@/api/user.js";
import storageLocationApi from "@/api/location.js";
import storageApi from "@/api/storage.js";
import maintenVendorApi from "@/api/mainten-vendor.js";
import maintenPersonnelApi from "@/api/mainten-personal";
import purchaseAccept from "@/api/purchase-accept";
import { parseTime } from "@/utils";

export default {
  data() {
    return {
      form: {
        assetStatus: "",
        assetName: "",
        number: "",
        assetCategoryId: "",
        itemCatalogId: "",
        source: "",
        adminId: "",
        userId: "",
        nowLocationId: "",
        targetLocationId: "",
        storageId: "",
        usage: "",
        amount: "",
        factoryDate: "",
        startDate: "",
        maintenVendorId: "",
        maintenPersonId: "",
        warranty: "",
        maintenStarted: "",
        maintenStatus: "",
        accountStatus: "",
        entryDate: "",
        cleanDate: "",
        inputDate: "",
        estimateUsageTerm: "",
        intoAmount: "",
        tax: "",
        residualValueRate: "",
        impairment: "",
        depreciatedMethod: "",
        accrualMethod: "",
        purchaseAcceptNum: "",
        creatorId: "",
      },
      rules: {
        assetStatus: [
          { required: true, message: "请输入资产状态", trigger: "blur" },
        ],
        assetName: [
          { required: true, message: "请输入资产名称", trigger: "blur" },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符之间",
            trigger: "blur",
          },
        ],
        // number: [
        //   { required: true, message: "请输入资产编号", trigger: "blur" },
        //   { type: "number", message: "资产编号必须为数字", trigger: "blur" },
        // ],
        assetCategoryId: [
          { required: true, message: "请选择资产类别", trigger: "change" },
        ],
        itemCatalogId: [
          { required: true, message: "请选择物品目录", trigger: "change" },
        ],
        source: [{ required: true, message: "请输入来源", trigger: "blur" }],
        adminId: [
          { required: true, message: "请选择管理员", trigger: "change" },
        ],
        userId: [{ required: true, message: "请选择用户", trigger: "change" }],
        nowLocationId: [
          { required: true, message: "请选择当前位置", trigger: "change" },
        ],
        targetLocationId: [
          { required: true, message: "请选择目标位置", trigger: "change" },
        ],
        storageId: [
          { required: true, message: "请选择存储", trigger: "change" },
        ],
        usage: [{ required: true, message: "请输入用途", trigger: "blur" }],
        amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
        factoryDate: [
          { required: true, message: "请选择生产日期", trigger: "change" },
        ],
        startDate: [
          { required: true, message: "请选择开始日期", trigger: "change" },
        ],
        maintenVendorId: [
          { required: true, message: "请选择维护供应商", trigger: "change" },
        ],
        maintenPersonId: [
          { required: true, message: "请输入维护人员", trigger: "blur" },
        ],
        warranty: [
          { required: true, message: "请输入保修期", trigger: "blur" },
        ],
        maintenStarted: [
          { required: true, message: "请选择维护开始日期", trigger: "change" },
        ],
        maintenStatus: [
          { required: true, message: "请输入维护状态", trigger: "blur" },
        ],
        accountStatus: [
          { required: true, message: "请输入账务状态", trigger: "blur" },
        ],
        entryDate: [
          { required: true, message: "请选择录入日期", trigger: "change" },
        ],
        cleanDate: [
          { required: true, message: "请选择清理日期", trigger: "change" },
        ],
        inputDate: [
          { required: true, message: "请选择输入日期", trigger: "change" },
        ],
        estimateUsageTerm: [
          { required: true, message: "请输入预计使用期限", trigger: "blur" },
        ],
        intoAmount: [
          { required: true, message: "请输入入账金额", trigger: "blur" },
        ],
        tax: [{ required: true, message: "请输入税收", trigger: "blur" }],
        residualValueRate: [
          { required: true, message: "请输入残值率", trigger: "blur" },
        ],
        impairment: [
          { required: true, message: "请输入减值", trigger: "blur" },
        ],
        depreciatedMethod: [
          { required: true, message: "请输入折旧方式", trigger: "blur" },
        ],
        accrualMethod: [
          { required: true, message: "请输入计提方式", trigger: "blur" },
        ],
        purchaseAcceptNum: [
          { required: true, message: "请输入采购验收号", trigger: "blur" },
        ],
        creatorId: [
          { required: true, message: "请选择创建人ID", trigger: "change" },
        ],
      },
      // 数据需要根据实际情况填充
      categories: [],
      items: [],
      users: [],
      locations: [],
      storages: [],
      vendors: [],
      maintenPersons: [],
      acceptNums: [],
      assetStatues: [
        { id: 1, name: "闲置中" },
        { id: 2, name: "使用中" },
        { id: 3, name: "借用中" },
        { id: 4, name: "维修中" },
        { id: 5, name: "已报废" },
      ],
      sources: [
        { id: 1, name: "购入" },
        { id: 2, name: "自建" },
        { id: 3, name: "租赁" },
        { id: 4, name: "捐赠" },
        { id: 5, name: "盘盈" },
        { id: 6, name: "其他" },
      ],
      maintenStatuses: [
        { id: 1, name: "正常" },
        { id: 2, name: "异常" },
      ],
      accountStatuses: [
        { id: 1, name: "未入账" },
        { id: 2, name: "已入账" },
      ],
      sources: [
        { id: 1, name: "购入" },
        { id: 2, name: "自建" },
        { id: 3, name: "租赁" },
        { id: 4, name: "捐赠" },
        { id: 5, name: "盘盈" },
        { id: 6, name: "其他" },
      ],
      depreciatedMethods: [
        { id: 1, name: "平均年限法" },
        { id: 2, name: "不折旧" },
      ],
      accrualMethods: [
        { id: 1, name: "当月增加，次月计提" },
        { id: 2, name: "当月增加，次月计提" },
      ],
    };
  },
  created() {
    this.getCategories();
    this.getItems();
    this.getUsers();
    this.getLocations();
    this.getStorages();
    this.getVendors();
    this.getAcceptNums();
  },
  methods: {
    getCategories() {
      assetCategory.findAll().then((res) => {
        this.categories = res.data;
      });
    },
    getItems() {
      itemCatalogApi.findAll().then((res) => {
        this.items = res.data;
      });
    },
    getUsers() {
      userService.findAll().then((res) => {
        this.users = res.data;
      });
    },
    getLocations() {
      storageLocationApi.findAll().then((res) => {
        this.locations = res.data;
      });
    },
    getStorages() {
      storageApi.findAll().then((res) => {
        this.storages = res.data;
      });
    },
    getVendors() {
      maintenVendorApi.findAll().then((res) => {
        this.vendors = res.data;
      });
    },
    getMaintenPersons(maintenVendorId) {
      maintenPersonnelApi.findPersonByVendorId(maintenVendorId).then((res) => {
        this.maintenPersons = res.data;
      });
    },
    handleChangeVendor(maintenVendorId) {
      this.form.maintenPersonId = null;
      this.getMaintenPersons(maintenVendorId);
    },
    getAcceptNums() {
      purchaseAccept.findAll().then((res) => {
        this.acceptNums = res.data;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log("submit!");
          // 提交逻辑，例如发送到后端
          // 日期格式化
          // this.form.factoryDate = parseTime(
          //   this.form.factoryDate,
          //   "{y}-{m}-{d}"
          // );
          // this.form.startDate = parseTime(this.form.startDate, "{y}-{m}-{d}");
          // this.form.maintenStarted = parseTime(
          //   this.form.maintenStarted,
          //   "{y}-{m}-{d}"
          // );
          // this.form.entryDate = parseTime(this.form.entryDate, "{y}-{m}-{d}");
          // this.form.cleanDate = parseTime(this.form.cleanDate, "{y}-{m}-{d}");
          // this.form.inputDate = parseTime(this.form.inputDate, "{y}-{m}-{d}");
          fixedAsset
            .add(this.form)
            .then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.$router.push({
                name: "FixedAsset",
              });
            })
            .catch(() => {
              this.$message({
                message: res.msg,
                type: "danger",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.clearfix {
  text-align: center;
}

.input-style {
  width: 100%; /* 输入框宽度一致 */
}

/* 使每个表单项的标签及内容居中 */
.el-form-item__content {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
